<template>
    <div>
        <el-form label-width="80px">
            <el-form-item label="SPU名称">{{ spu.spuName }}</el-form-item>
            <el-form-item label="SKU名称">
                <el-input placeholder="sku名称" v-model="skuInfo.skuName"></el-input>
            </el-form-item>
            <el-form-item label="价格(元)">
                <el-input placeholder="价格(元)" v-model="skuInfo.price" type="number"></el-input>
            </el-form-item>
            <el-form-item label="重量(千克)">
                <el-input placeholder="重量(千克)" v-model="skuInfo.weight"></el-input>
            </el-form-item>
            <el-form-item label="规格描述">
                <el-input type="textarea" placeholder="重量(千克)" rows="4" v-model="skuInfo.skuDesc"></el-input>
            </el-form-item>
            <el-form-item label="平台属性">
                <el-form :inline="true" ref="form" label-width="80px">
                    <el-form-item :label="attr.attrName" :key="attr.id" v-for="(attr, index) in attrInfoList">
                        <el-select placeholder="请选择" v-model="attr.attrIdAndValueId">
                            <el-option :key="attrValue.id" :label="attrValue.valueName"
                                :value="`${attr.id}:${attrValue.id}`"
                                v-for="(attrValue, index) in attr.attrValueList"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-form-item>
            <el-form-item label="销售属性">
                <el-form :inline="true" ref="form" label-width="80px">
                    <el-form-item :label="saleAttr.saleAttrName" v-for="(saleAttr, index) in AttrSaleAttrList"
                        :key="saleAttr.id">
                        <el-select placeholder="请选择" v-model="saleAttr.attrIdAndValueId">
                            <el-option :label="saleAttrValue.saleAttrValueName"
                                :value="`${saleAttr.id}:${saleAttrValue.id}`"
                                v-for="(saleAttrValue, index) in saleAttr.spuSaleAttrValueList"
                                :key="saleAttrValue.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-form-item>
            <el-form-item label="图片列表">
                <el-table style="width: 100%;" border :data="spuImageList" @selection-change="handleSelectionChange">
                    <el-table-column prop="prop" label="" width="80" type="selection">

                    </el-table-column>
                    <el-table-column prop="prop" label="图片" width="width">
                        <template slot-scope="{row, $index}">
                            <img :src="row.imgUrl" style="width: 100px;height: 100px">
                        </template>
                    </el-table-column>
                    <el-table-column prop="imgName" label="名称" width="width"></el-table-column>
                    <el-table-column prop="prop" label="操作" width="width">
                        <template slot-scope="{row, $index}">
                            <el-button type="primary" @click="changeDefault(row)"
                                v-if="row.isDefault == 0">设置默认</el-button>
                            <el-button size="mini" v-else>默认</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addSku">保存</el-button>
                <el-button @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>

export default {
    nama: 'SkuForm',
    data() {
        return {
            spuImageList: [],//图片信息
            attrInfoList: [],//存储平台属性
            AttrSaleAttrList: [], //销售属性列表
            spu: {

            },
            skuInfo: {
                category3Id: 0,
                spuId: 0,
                tmId: 0,
                price: 0,
                skuName: "",
                weight: "",
                skuDesc: "",
                skuAttrValueList: [
                    // {
                    //     "attrId": 0,
                    //     "valueId": 0,
                    // }
                ],
                skuDefaultImg: "",
                skuImageList: [
                    {
                        // "id": 0,
                        // "imgName": "string",
                        // "imgUrl": "string",
                        // "isDefault": "string",
                        // "skuId": 0,
                        // "spuImgId": 0
                    }
                ],

                skuSaleAttrValueList: [
                    // {
                    //     "id": 0,
                    //     "saleAttrId": 0,
                    //     "saleAttrValueId": 0,
                    //     "saleAttrValueName": "string",
                    //     "skuId": 0,
                    //     "spuId": 0
                    // }
                ]
            },
            imageList: []
        }
    },
    methods: {
        async getData(category1Id, category2Id, spu) {
            this.skuInfo.category3Id = spu.category3Id
            this.skuInfo.spuId = spu.id
            this.skuInfo.tmId = spu.tmId
            this.spu = spu

            let res1 = await this.$API.spu.reqSpuImageList(spu.id)
            if (res1.code == 200) {
                let list = res1.data
                list.forEach(item => {
                    item.isDefault = 0
                })
                this.spuImageList = list
            }

            let res2 = await this.$API.sku.reqSpuSaleAttrList(spu.id)
            if (res2.code == 200) {
                this.AttrSaleAttrList = res2.data
            }

            let res3 = await this.$API.attr.reqAttrInfoList(category1Id, category2Id, spu.category3Id)
            if (res3.code == 200) {
                this.attrInfoList = res3.data
            }
        },
        handleSelectionChange(selection) {
            this.imageList = selection
        },
        changeDefault(row) {
            this.spuImageList.forEach(item => {
                item.isDefault = 0
            })
            row.isDefault = 1
            this.skuInfo.skuDefaultImg = row.imgUrl
        },
        async addSku() {
            // let arr = []
            // this.attrInfoList.forEach(item => {
            //     if (item.attrIdAndValueId) {
            //         const [attrId, valueId] = item.attrIdAndValueId.split(":")
            //         let obj = { attrId, valueId }
            //         arr.push(obj)
            //     }
            // })
            // skuInfo.skuAttrValueList = arr

            this.skuInfo.skuAttrValueList = this.attrInfoList.reduce((prev, item) => {
                if (item.attrIdAndValueId) {
                    const [attrId, valueId] = item.attrIdAndValueId.split(":")
                    prev.push({ attrId, valueId })
                }
                return prev
            }, [])
            this.skuInfo.skuSaleAttrValueList = this.AttrSaleAttrList.reduce((prev, item) => {
                if (item.attrIdAndValueId) {
                    const [saleAttrId, saleAttrValueId] = item.attrIdAndValueId.split(":")
                    prev.push({ saleAttrId, saleAttrValueId })
                }
                return prev
            }, [])

            this.skuInfo.skuImageList = this.imageList.map(item => {
                return {
                    imgName: item.imgName,
                    imgUrl: item.imgUrl,
                    isDefault: item.isDefault,
                    spuImgId: item.id
                }
            })
            let result = await this.$API.sku.reqAddSku(this.skuInfo)
            if (result.code == 200) {
                this.$message({ type: 'success', message: "添加sku成功" })
                this.$emit('changeScenes', 0)
                // Object.assign(this._data, this.$options.data())
            }
        },
        cancel() {
            this.$emit('changeScenes', 0)
            Object.assign(this._data, this.$options.data())
        }
    }
}


</script>

<style></style>